<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js</title>
    <!-- <script src="d3.v7.min.js"></script> -->
    <script src="jquery-3.6.4.js"></script>
    <script src="d3.v5.js"></script>
    <style>
        .chartd3{
            background: #eee;
        }
        .heavy{
            font: bold 30px sans-serf;
        }

    </style>
</head>
<body>

    <div class="canva">
        
    </div>
    
</body>
<script>
  

const canvas = d3.select(".canva")
d3.json("https://jsonplaceholder.typicode.com/todos").then(function(data,error){
    console.log(data);
})
var dataArray = [
    {width:25,height:4,fill:"pink"},
    {width:25,height:14,fill:"yellow"},
    {width:25,height:43,fill:"green"},
    {width:25,height:60,fill:"grey"},
    {width:25,height:4,fill:"red"},

]
const svg =canvas.append("svg")
    svg.attr("width",600)
    .attr('height',600 )
    // .attr('stroke',"black")

const rect = svg.selectAll("rect")

rect.data(dataArray)
    .enter().append("rect")
    .attr('x', function(d,i){
        console.log(d,i);
        return (i)*(d.width+1);
    })
    .attr('y',function(d,i){
        return 200 - d.height*2;
    } )
     .attr('width', function(d,i){
        return d.width;
     } )
     .attr('height', function(d,i){
        return d.height*2;
     })
     .style('fill', function(d,i){
        return d.fill;
     })
     .attr('stroke',"black" );
 

</script>

</html>